<template>
  <div>
    <!-- 面包屑   -->
    <div style="margin-bottom: 30px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>业务状况分布图</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <h2>业务状况分布图<i class="el-icon-pie-chart"></i></h2>
    <el-divider></el-divider>
<!--    <el-row :gutter="20">-->
<!--      <el-col :span="12"><div id="purchase"></div></el-col>-->
<!--      <el-col :span="12"><div id="consume"></div></el-col>-->
<!--    </el-row>-->
    <div id="purchase"></div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import request from "@/utils/request";

export default {
  name: "DistributionChart",
  data() {
    return {
      pieData:[]
    }
  },
  created() {
  },
  mounted() {
    request.get('pie').then(res=>{
      this.pieData=res.data
      var chartDom = document.getElementById('purchase');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              normal: {
                show: true,
                formatter: '{b}: {c}元({d}%)', //自定义显示格式(b:name, c:value, d:百分比)
              },
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.pieData[0], name: '运输' },
              { value: this.pieData[1], name: '配送' },
              { value: this.pieData[2], name: '仓储' },
              { value: this.pieData[3], name: '流通加工' },
              { value: this.pieData[4], name: '快递' }
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    })
  },
  methods: {}
}
</script>

<style scoped>
#purchase{
  width: 100%;
  height: 500px;
}
#consume{
  width: 100%;
  height: 500px;
}
</style>